<template>
  <h1 class="text">2022北京冬奥</h1>
  <div class="contnet flex">
    <div>
      <!-- 内嵌B站视频 -->
      <iframe
        src="//player.bilibili.com/player.html?aid=723784010&bvid=BV1zS4y1k7L3&cid=500994771&page=1"
        width="800px"
        height="500px"
        scrolling="no"
        border="0"
        frameborder="no"
        framespacing="0"
        allowfullscreen="true"
      >
      </iframe>
    </div>

    <!-- 评论区域 -->
    <div class="Comments">
      <div class="commentsView">
        <ui>
        <li v-for="item in list" :key="item.id">
             {{ item.msg }}
          </li>
        </ui>
      </div>
      <div class="inputArea">
        <form v-on:submit.prevent="addMsg">
           <el-input v-model="newMsg" placeholder="输入评论" />
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "videoPage",
  /**
   * vue3 的setup没学呢，就先用vue2的写法了
   */
  data() {
    return {
      list: [
        {
          id: 1,
          msg: "好期待啊，我期待的要死了！（doge）",
        },
        {
          id: 2,
          msg: "让世界认识什么才叫真8k!!!!",
        },
        {
          id: 3,
          msg: "八点十五下班刚回家",
        },
        {
          id: 4,
          msg: "Last four minutes",
        },
        {
          id: 5,
          msg: "太激动人心了",
        },
        {
          id: 6,
          msg: "Into the sun",
        },
      ],
      newMsg: "",
      nextId: 7,
    };
  },
  methods: {
    // 将输入框里的值添加到list里面
    addMsg() {
      this.list.push({
        id: this.nextId++,
        msg: this.newMsg,
      });
      this.newMsg = "";
    },
  },
};

/**
 * 
 * 这里的应该要输入后发给后端的，时间紧没做
 * 完整的做下来的话以我们组现在的实力时间估计不够
 * 
 */
</script>

<style scoped>
.inputArea{
  height: 10%;
  margin-top: 18px;
}

.Comments {
  width: 200px;
  height: 500px;
  border: 2px #c0c4cc solid;
  border-radius: 4px
}

.commentsView{
  height: 90%;
  padding: 3px;
  overflow: auto;
  box-sizing: border-box;
}

.commentsView li{
  font-size: 14px;
   word-wrap: break-word;
   display: block;
    line-height: 30px;
    padding: 0 10px;
    color: #646c7a;
    margin: 5px 0;
    transition: all 0.3s;
    border-radius: 3px;
    cursor: pointer;
    white-space: pre-wrap;
}

.contnet{
  width: 1004px;
  margin: 0 auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04)
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.text{
  font-size: 42px;
  font-weight: 900;
  font-family: Fantasy;
  text-align: center;
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
</style>